<template>
 <el-popover trigger="click" placement="bottomRight" v-model:visible="visible">
    <template #content>
      <div class="qms-popover-box">
        <el-button @click="submitChange(record,col)" size="small" type="primary">confirm</el-button>
        <el-button @click="cancelChange(record,col)" size="small">cancel</el-button>
      </div>
    </template>
    <slot :data="record">
      <component
        :is="formComponents[component]"
        v-model:value="editValue"
        v-model:checked="editValue"
        v-bind="{ ...parameter }"
        style="width:calc(100% - 5px)"
      />
    </slot>
  </el-popover>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue"
import { formComponents } from '@/utils/formComponents'
const props = defineProps({
  record: Object,
  col: String,
  component: String,
  parameter: Object
})
const editValue = ref(props.record[props.col])
const visible = ref(false)
const emits = defineEmits(['submit'])
const handleChange = (value, record) => {
  record.storeValue = value
}
const submitChange = (record, col) => {
  record[col] = editValue.value
  visible.value = false
  emits('submit', record)
}
const cancelChange = (record,col) => {
  editValue.value = record[col]
  visible.value = false
}
</script>
<style lang="less">
.ant-popover-inner-content{
  padding:5px 10px;
}
.qms-popover-box{
  button{
    margin:5px;
  }
}
</style>